<template>
  <div class="newactivity">
    <el-steps :active="active" finish-status="success">
      <el-step title="新建活动"></el-step>
      <el-step title="选择客户分群"></el-step>
      <el-step title="编辑创意"></el-step>
      <el-step title="投放规划"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- 表单 -->
    <div class="content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="品牌">
          <el-input v-model="form.name" placeholder="例如：金韵美妆" prefix-icon="el-icon-tickets"
            onfocus='if(this.placeholder=="例如：金韵美妆"){this.placeholder="";}; '
            onblur='if(this.placeholder==""){this.placeholder="例如：金韵美妆";};'>
          </el-input>
        </el-form-item>
        <el-form-item label="行业">
          <el-input v-model="form.hangye" placeholder="例如：蓝标智能内容创意平台用户唤醒活动" prefix-icon="el-icon-tickets"
            onfocus='if(this.placeholder=="例如：蓝标智能内容创意平台用户唤醒活动"){this.placeholder="";}; '
            onblur='if(this.placeholder==""){this.placeholder="例如：蓝标智能内容创意平台用户唤醒活动";};'></el-input>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="form.mingcheng" placeholder="例如：蓝标智能内容创意平台用户唤醒活动" prefix-icon="el-icon-tickets"
            onfocus='if(this.placeholder=="例如：蓝标智能内容创意平台用户唤醒活动"){this.placeholder="";}; '
            onblur='if(this.placeholder==""){this.placeholder="例如：蓝标智能内容创意平台用户唤醒活动";};'></el-input>
        </el-form-item>
        <el-form-item label="活动标签">
          <el-input v-model="form.biaoqian" placeholder="例如：蓝标智能内容创意平台用户唤醒活动" prefix-icon="el-icon-tickets"
            onfocus='if(this.placeholder=="例如：蓝标智能内容创意平台用户唤醒活动"){this.placeholder="";}; '
            onblur='if(this.placeholder==""){this.placeholder="例如：蓝标智能内容创意平台用户唤醒活动";};'></el-input>

          <p class="txt">营销目的</p>
          <ul class="activity-finally">
            <li class="lifinally" v-for="(item,index) in finallydata" :key="index" @click="select(index,$event)">
              {{item.title}}</li>
          </ul>

          <p class="txt">活动分类</p>
          <ul class="activity-sort">
            <li class="lisort" v-for="(item,index) in sortdata" :key="index">{{item.title}}</li>
          </ul>

          <!-- 日历 -->
          <p class="txt">日历</p>
          <ul class="time">
            <li class="lidate" v-for="(item,index) in timedata" :key="index">{{item.title}}</li>
          </ul>

        </el-form-item>

        <el-form-item label="活动时间">
          <!-- <router-link to="/calendar"> -->
            <div class="block">
              <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']" clear-icon="el-icon-circle-close">
              </el-date-picker>
            </div>
          <!-- </router-link> -->
        </el-form-item>

        <el-form-item label="触达方式">
          <el-radio-group v-model="form.resource">
            <el-radio label="短信"></el-radio>
            <!-- 点击彩信/视频短信--跳转 -->
            <router-link to="/videomessage">
              <el-radio label="彩信/视频短信"></el-radio>
            </router-link>

            <el-radio label="5G(SRC)消息"></el-radio>
          </el-radio-group>

          <el-checkbox-group v-model="form.type">
            <el-checkbox label="我有落地页需要转换成短链" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="预计触达">
          <el-input v-model="form.chuda" placeholder="例如：蓝标智能内容创意平台用户唤醒活动" prefix-icon="el-icon-tickets"
            onfocus='if(this.placeholder=="例如：蓝标智能内容创意平台用户唤醒活动"){this.placeholder="";}; '
            onblur='if(this.placeholder==""){this.placeholder="例如：蓝标智能内容创意平台用户唤醒活动";};'></el-input>
        </el-form-item>


        <div class="btn">
          <el-button type="primary" round @click="goback">返回</el-button>
          <el-button type="primary" round @click="onSubmit()">试算触达预算</el-button>
          <el-button type="primary" round style="margin-top: 12px;" @click="next">下一步</el-button>
        </div>

      </el-form>
      <div class="logo">
        <span>品牌Logo(选填)：</span>
        <div class="upload">
          <div class="block">
            <el-upload class="avatar-uploader" action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img class="uploadimg" v-if="imageUrl" :src="imageUrl">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="list">
          <p style="line-height: 50px;">预估触达预算金额</p>
          <table style="border: 1px solid gray;width: 230px;height:200px;margin: auto;border-collapse: collapse;">
            <tr>
              <td>总人数</td>
              <td>2.32w</td>
            </tr>
            <tr>
              <td>触达方式</td>
              <td>短信</td>
            </tr>
            <tr>
              <td colspan="2">总体预算1，160元</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Newactivity',
    data() {
      return {
        imageUrl: '',
        value: "",
        active: 0,
        form: {
          name: '',
          hangye: "",
          mingcheng: "",
          biaoqian: "",
          chuda: "",
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        finallydata: [
          { title: "拉新" },
          { title: "运营" },
          { title: "唤醒" },
          { title: "活跃" },
          { title: "学习" },
          { title: "sping" }
        ],
        sortdata: [
          { title: "3dmax" },
          { title: "spring" },
          { title: "爬虫" },
          { title: "ui" },
          { title: "web" }
        ],
        timedata: [
          { title: "618" },
          { title: "双11" },
          { title: "双12" },
          { title: "女王节" },
          { title: "吃货节" },
          { title: "情人节" }
        ]
      };
    },

    methods: {
      next() {
        if (this.active++ > 3) this.active = 0;
        this.$router.push("/sort")
      },
      onSubmit() {
        this.$router.push("/sort")
        console.log('submit!');
        //取输入input框的内容
        let obj = {
          name: this.form.name,
          hangye: this.form.hangye,
          mingcheng: this.form.mingcheng,
          biaoqian: this.form.biaoqian,
          chuda: this.form.chuda,
          date: this.value,
          resource: this.form.resource

        }
        console.log(obj)
        // console.log(e.target.value)获取收入框的值
      },
      goback() {
        window.history.go(-1);
      }
      ,
      select(index) {
        var el = event.currentTarget;//获取点击的对象

        console.log(el.innerHTML)
        console.log(index)
        //把选中的标签推到数组里边去，显示到input
        var a = el.innerHTML;

      },
      tomessage() {
        console.log(111)
        this.$router.push("/message")
      },
      //上传logo
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    //选项行
    computed: {
      //将选中的标签放入活动标签的input中
      // inputvalue() {
      //   let arr = [];
      //   let str = "";
      //   for (var i = 0; i < finallydata.length; i++) {
      //     arr.push({ Title: this.finallydata[i].title })
      //   }
      //   str = arr.join("");
      //   return str;
      // }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .content {
    display: flex;
  }

  .logo {
    width: 350px;
    height: 700px;
    display: flex;
    flex-direction: column;
  }

  .el-form {
    width: 500px;
    margin: 30px 150px 30px 550px;
  }

  .btn {
    width: 530px;
  }

  .el-button {
    width: 170px;
  }

  .txt {
    color: gray;
  }

  .activity-finally,
  .activity-sort,
  .time {
    width: 400px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lifinally,
  .lisort,
  .lidate {
    width: 18%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 15px;
    margin: 5px;
    color: rgb(194, 190, 190);
    font-size: 12px;
    border: 1px solid #d4d4d4;
  }

  .upload {
    width: 260px;
    height: 260px;
    background: #d4d4d4;
  }

  .list {
    width: 240px;
    height: 260px;
    border: 1px solid gray;
    margin-top: 130px;
  }

  .el-icon-plus {
    width: 260px;
    height: 260px;
    line-height: 260px;
    text-align: center;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
  }

  .uploadimg {
    width: 260px;
    height: 260px;
  }

  td {
    border: 1px solid gray;
    text-align: center;
  }
</style>